import {createRouter,createWebHistory} from "vue-router";
import NProgress from "nprogress";
import "nprogress/nprogress.css"

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            redirect: 'Login',
        },
        // 管理员登录
        {
            path: '/adminLogin',
            name: 'AdminLogin',
            component: () => import("../views/admin/Login.vue")
        },
        // 用户登录
        {
            path: '/login',
            name: 'Login',
            component: () => import("../views/other/Login.vue")
        },
        // 后台管理界面
        {
            path: '/adminMain',
            name: 'AdminMain',
            redirect: 'adminMain/adminHomePage',
            meta: { requiresAuth: true,isAdminPage: true },
            component: () => import("../views/admin/Main.vue"),
            children: [
                {
                  path: 'adminHomePage',
                  name: 'AdminHomePage',
                  meta: { title: "首页" },
                  component: () => import("../components/admin/HomePage.vue")
                },
                {
                    path: 'orderManage',
                    name: 'OrderManage',
                    meta: { title: "订单管理" },
                    component: () => import("../components/admin/OrderManage.vue")
                },
                {
                    path: 'userManage',
                    name: 'UserManage',
                    meta: { title: "用户管理" },
                    component: () => import("../components/admin/UserManage.vue")
                },
                {
                    path: 'hanfuManage',
                    name: 'HanfuManage',
                    meta: { title: "汉服管理" },
                    component: () => import("../components/admin/HanfuManage.vue")
                },
                {
                    path: 'hanfuShopManage',
                    name: 'HanfushopManage',
                    meta: { title: "汉服店铺管理" },
                    component: () => import("../components/admin/HanfuShopManage.vue")
                },
                {
                    path: 'hanfuTypeManage',
                    name: 'HanfuTypeManage',
                    meta: { title: "汉服种类管理" },
                    component: () => import("../components/admin/HanfuTypeManage.vue")
                },
            ]
        },
        // 用户界面
        {
            path: '/main',
            name: 'Main',
            redirect: 'main/homePage',
            meta: { requiresAuth: true,isUserPage: true },
            component: () => import("../views/other/Main.vue"),
            children: [
                {
                    path: 'homePage',
                    name: 'HomePage',
                    meta: { title: "首页" },
                    component: () => import("../components/other/HomePage.vue")
                },
                {
                    path: 'typePopularization',
                    name: 'TypePopularization',
                    meta: { title: "汉服类型科普" },
                    component: () => import("../components/other/TypePopularization.vue")
                },
                {
                    path: 'shopRecommended',
                    name: 'ShopRecommended',
                    meta: { title: "汉服店铺推荐" },
                    component: () => import("../components/other/ShopRecommended.vue")
                },
                {
                    path: 'productDetail',
                    name: 'ProductDetail',
                    meta: { title: "商品详情页" },
                    component: () => import("../components/other/ProductDetail.vue")
                },
                {
                    path: 'searchProduct',
                    name: 'SearchProduct',
                    meta: { title: "搜寻页" },
                    component: () => import("../components/other/SearchProduct.vue")
                },
                {
                    path: 'shoppingCart',
                    name: 'ShoppingCart',
                    meta: { title: "购物车" },
                    component: () => import("../components/other/ShoppingCart.vue")
                },
                {
                    path: 'pastOrder',
                    name: 'PastOrder',
                    meta: { title: "历史订单" },
                    component: () => import("../components/other/PastOrder.vue")
                }
            ]
        }
    ]
});

// 设置加载进度条，美化白屏界面
NProgress.configure({showSpinner: false}) // 配置NProgress

// 路由前置守卫
router.beforeEach((to,from,next) => {
    NProgress.start();
    const isAuthenticated = !!localStorage.getItem('user');
    const isAuthenticated2 = !!localStorage.getItem('admin');
    // 路由需要登陆但用户未认证
    if(to.meta.requiresAuth) {
        // 是用户页面
        if((to.meta.isUserPage && !isAuthenticated)) {
            next({ name: 'Login' });
        } else if(to.meta.isAdminPage && !isAuthenticated2) { // 是管理员页面
            next({ name: 'AdminLogin'});
        } else { // 已认证情况下放行
            next();
        }
    } else { // 不需要认证情况放行
        next();
    }
})

// 路由后置守卫
router.afterEach(() => {
    NProgress.done();
})
export default router;